<template>
<div class="recruit">
  <img src="./../assets/product/pCarousel.png" alt="pCarousel" class="pCarousel">
  <h3 class="title">PRODUCT</h3>
  <p class="brif">人才招聘</p>
  <div class="content">
    <ul id="ch">
      <li v-for="(item,index) of jobs" @click="childCheck( index )">{{item.name}}
        <div class="lists" v-show="index == i">
          <div v-for="oItem of item.demand">
            <h3>{{oItem.title}}</h3>
            <p class="address">工作地点：{{oItem.address}}</p>
            <p>岗位职责：</p>
            <ul>
              <li v-for="du of oItem.duty">{{du.id}}.{{du.list}}</li>
            </ul>
            <p class="ask">任职要求：</p>
            <ul>
              <li v-for="as of oItem.ask">{{as.id}}.{{as.list}}</li>
            </ul>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>
</template>
<script>
import jQuery from 'jquery'
export default {
  data() {
    return {
      jobs:[],
      i: 0
    }
  },
  methods : {
    getdata() {
      this.$http({
        url: 'http://localhost:2000/getjson/recruit',
        method: 'get'
      }).then((res) => {
        this.jobs = res.data.post
      }).catch((res) => {
        console.log('erro:', res)
      })
    },
    childCheck(index) {
      let p = jQuery('.content > ul > li');
      if(index >= 0){
        this.i = index;
        p.removeClass('pitch');
        p.eq(index).addClass('pitch');
        let h = jQuery('.lists').eq(index).height()
        jQuery('#ch').height(h);
      }else {
        p.eq(1).addClass('pitch');
        jQuery('#ch').height(1000);
      }

    }
  },
  mounted() {
    this.childCheck();
    this.getdata();
  }

}
</script>
<style scoped>
.pCarousel {
  width: 100%;
}
.content {
  position: relative;
}
.lists {
  position: absolute;
  top: 0;
  left: 25rem;
  font-size: 0.8rem !important;
  color: #2c3e50 !important;
}
.content > ul {
  margin: 4rem 4rem;
}
.content > ul > li {
  color: #000000;
  height: 2.5rem;
  line-height: 2.5rem;
  display: block;
  width: 12rem;
  padding-left: 1rem;
  font-size: 1rem;
  margin-bottom: 0.8rem;
}
.content > ul > li:hover {
  cursor: pointer;
  background-color: #11a2d0;
}
.lists:hover {
  cursor: default !important;
}
.ask {
  margin-top: 1rem;
}
.lists > div {
  margin-bottom: 2rem;
}
.lists > div > h3 {
  text-indent: 2rem;
}
</style>
